/*
 * @Author: 徐博
 * @Date: 2023-03-07 17:40:13
 * @Last Modified by: 徐博
 * @Last Modified time: 2023-03-08 09:34:05
 */

<template>
  <a-form ref="formRef" name="advanced_search" class="fe-search-form" :model="formState" :label-col="labelCol"
    @finish="onFinish">
    <a-row :gutter="24">
      <template v-for="item in searchConfigs">
        <a-col :span="item.span || 6">
          <a-form-item :name="item.name" :label="itemLabel(item)">
            <a-input v-if="item.type == 'input'" v-model:value="formState[`${item.name}`]"
              :placeholder="item?.placeholder || t('pleaseInput')"></a-input>
            <a-select v-if="item.type == 'select'" v-model:value="formState[`${item.name}`]" :placeholder="t('pleaseInput')">
              <template v-for="item1 in item.options" :key="item1.value">
                <a-select-option :value="item1.value">{{ item1.name }}</a-select-option>
              </template>
            </a-select>
            <a-range-picker v-if="item.type == 'rangeDatePicker'" v-model:value="formState[`${item.name}`]"
              :value-format="item.format ? item.format : 'YYYY-MM-DD'" :placeholder="['开始时间', '结束时间']" />
            <a-date-picker v-if="item.type == 'datePicker'" v-model:value="formState[`${item.name}`]"
              :value-format="item.format ? item.format : 'YYYY-MM-DD'" placeholder="请选择日期" />
          </a-form-item>
        </a-col>
      </template>
      <a-col :span="buttonCenter ? 24 : 6" style="text-align: center">
        <a-button type="primary" html-type="submit">{{t('search')}}</a-button>
        <a-button style="margin: 0 20px" @click="reset">{{t('reset')}}</a-button>
      </a-col>
    </a-row>
  </a-form>
</template>

<script lang="ts" setup>
import {defineProps, ref, defineEmits, computed, onMounted, watch} from 'vue';
import type { FormInstance } from 'ant-design-vue';
import { SearchConfigs } from './fe-search.type';
import {useI18n} from "vue-i18n";

const {t} = useI18n();
export interface Props {
  searchConfigs: Array<SearchConfigs>;
  formState: any;
  buttonCenter?: boolean;
  labelWidth?: number;
}
const props = withDefaults(defineProps<Props>(), {
  buttonCenter: false,
  labelWidth: 90,
})

const formModel = ref<any>()

// watch(()=> props.formState, ())

const itemLabel = (item: any) => {
  return t(item.label)
}

const emit = defineEmits(['onSearch'])
const formRef = ref<FormInstance>();
const labelCol = { style: { width: `${props.labelWidth}px` } }

const onFinish = (values: any) => {
  emit('onSearch', values)
};
const reset = () => {
  formRef.value?.resetFields()
  emit('onSearch', {})
}

const getParams = () => {
  return props.formState
}

defineExpose({getSearchValue: getParams})
</script>
